<template>
    <div class="message">
        <ToolBar :names="names"></ToolBar>
        <div class="classify">
            <div class="box">

                <!--          <router-link to="/message" tag="span" class="active">高低提醒</router-link>-->
                <!--          <router-link to="/message/list" tag="span">合约提醒</router-link>-->
                <!--          <span>背离提醒<span class="msg-num">10</span></span>-->
                <!--          <span>智能选币<span class="msg-num">10</span></span>-->
                <!--          <span>牛熊仓位<span class="msg-num">10</span></span>-->

                <span v-for="(l,index) in list" :key="index" :class="model==l.model?'active':''"
                      @click="setModel(l.model,l.name)">{{l.name}}<span class="msg-num" v-for="(s,item) in messageCount"
                                                                        :key="item"
                                                                        v-if="s.model == l.model&&s.count>0">{{s.count}}</span></span>
                <router-link to="/home/strategy" tag="span">策略跟单</router-link>
                <router-link to="/live" tag="span">实盘直播</router-link>

                <p>数据来源：www.aibinance.com</p>
            </div>
        </div>
        <div class="infolist">
            <router-view :model="model" :count="thisCount"></router-view>
        </div>

    </div>
</template>
<script>
    import ToolBar from "../components/Message/ToolBar";

    export default {
        name: "message",
        components: {ToolBar},
        data() {
            return {
                names: '高低提醒',
                messageCount: [],
                list: [
                    {
                        name: '高低提醒',
                        model: 5,
                        sort: 1
                    },
                    {
                        name: '合约提醒',
                        model: 6,
                        sort: 2
                    },
                    {
                        name: '背离提醒',
                        model: 7,
                        sort: 3
                    },
                    {
                        name: '智能选币',
                        model: 1,
                        sort: 4
                    },
                    {
                        name: '牛熊仓位',
                        model: 2,
                        sort: 5
                    }


                ],
                model: 5,
                thisCount: 0
            }
        },
        watch: {
            "model": function () {
                this.getCount()
            }
        },
        mounted() {
            this.getCount()
        },
        methods: {
            getCount() {

                let data = {
                    token: this.getCookie("token")
                }
                this.$api.home.CountMessage(data).then(res => {
                    // 执行某些操作
                    this.messageCount = res.data.data

                    for (const l of res.data.data) {
                        if (this.model == l.model) {
                            this.thisCount = l.count
                        }
                    }

                })
            },
            setModel(m, name) {
                this.names = name
                this.model = m
                this.getCount()
            }
        }
    }
</script>
<style scoped>
    .classify {
        padding: 1rem 1rem 0 1rem;
        position: fixed;
        top: 3rem;
        background: #fff;
        height: 9rem;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .box {
        width: 100%;
        border-bottom: 1px solid #eee;
        display: flex;
        flex-wrap: wrap;


    }

    .box > span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
        height: 2rem;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(222, 226, 229, 1);
        border-radius: 0.1rem;

        font-size: 0.88rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(20, 163, 101, 1);
        margin-right: 1rem;
        margin-bottom: 1rem;
        position: relative;
    }

    .box > span:nth-child(4) {
        margin-right: 0;
    }

    .box > span.active {
        color: #fff;
        background: #14A365;
        border-color: #14A365;
    }

    .box p {
        width: 100%;
        font-size: 0.63rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999;
        text-align: left;
        margin-bottom: 1rem;
    }

    .msg-num {
        position: absolute;
        right: -0.3rem;
        top: -0.3rem;
        width: 1rem;
        height: 1rem;
        background: rgba(253, 1, 0, 1);
        border-radius: 50%;
        font-size: 0.63rem !important;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1) !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .infolist {
        position: absolute;
        top: 12rem;
        left: 0;
        right: 0;
        margin-bottom: 5rem;
    }


</style>